<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分区/机房管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f7fa;
            margin: 0;
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .container {
            max-width: 1100px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.08);
            padding: 32px 24px 24px 24px;
        }
        .tab-header {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <div id="zone-room-app">
        <div class="container">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="项目分区管理" name="zone">
                    <div class="tab-header">
                        <el-button type="primary" size="small" @click="addZone"><i class="el-icon-plus"></i> 新增分区</el-button>
                    </div>
                    <el-table :data="zones" style="width: 100%">
                        <el-table-column prop="zoneId" label="分区ID" width="100"></el-table-column>
                        <el-table-column prop="location" label="位置" width="120"></el-table-column>
                        <el-table-column prop="projectName" label="项目名称" width="140"></el-table-column>
                        <el-table-column prop="zoneName" label="分区名称" width="140"></el-table-column>
                        <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="editZone(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteZone(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="项目机房管理" name="room">
                    <div class="tab-header">
                        <el-button type="primary" size="small" @click="addRoom"><i class="el-icon-plus"></i> 新增机房</el-button>
                    </div>
                    <el-table :data="rooms" style="width: 100%">
                        <el-table-column prop="roomId" label="机房ID" width="120"></el-table-column>
                        <el-table-column prop="location" label="位置" width="120"></el-table-column>
                        <el-table-column prop="projectName" label="项目名称" width="140"></el-table-column>
                        <el-table-column prop="roomName" label="机房名称" width="140"></el-table-column>
                        <el-table-column prop="zoneName" label="所属分区" width="140">
                            <template slot-scope="scope">
                                <span v-if="scope.row.zoneName">{{ scope.row.zoneName }}</span>
                                <span v-else style="color: #999;">未分配</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="roomType" label="机房类型" min-width="180">
                            <template slot-scope="scope">
                                <el-select
                                    v-model="scope.row.roomType"
                                    size="mini"
                                    placeholder="请选择机房类型"
                                    style="width: 100%;"
                                    disabled
                                >
                                    <el-option
                                        v-for="type in roomTypeOptions"
                                        :key="type.value"
                                        :label="type.label"
                                        :value="type.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="editRoom(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteRoom(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        
        <!-- 分区编辑对话框 -->
        <el-dialog :title="zoneDialogTitle" :visible.sync="zoneDialogVisible" width="600px" :before-close="handleZoneDialogClose">
            <el-form :model="zoneForm" :rules="zoneRules" ref="zoneForm" label-width="100px">
                <el-form-item label="分区ID" prop="zoneId">
                    <el-input v-model="zoneForm.zoneId" :disabled="zoneDialogTitle === '编辑分区'"></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location">
                    <el-input v-model="zoneForm.location" placeholder="请输入位置"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-select v-model="zoneForm.projectName" placeholder="请选择项目" style="width: 100%;">
                        <el-option
                            v-for="project in projects"
                            :key="project.value"
                            :label="project.label"
                            :value="project.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分区名称" prop="zoneName">
                    <el-input v-model="zoneForm.zoneName" placeholder="请输入分区名称"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="zoneForm.description" placeholder="请输入分区描述" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleZoneDialogClose">取消</el-button>
                <el-button type="primary" @click="saveZone">确定</el-button>
            </div>
        </el-dialog>

        <!-- 机房编辑对话框 -->
        <el-dialog :title="roomDialogTitle" :visible.sync="roomDialogVisible" width="600px" :before-close="handleRoomDialogClose">
            <el-form :model="roomForm" :rules="roomRules" ref="roomForm" label-width="100px">
                <el-form-item label="机房ID" prop="roomId">
                    <el-input v-model="roomForm.roomId" :disabled="roomDialogTitle === '编辑机房'"></el-input>
                </el-form-item>
                <el-form-item label="位置" prop="location">
                    <el-input v-model="roomForm.location" placeholder="请输入位置"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="projectName">
                    <el-select v-model="roomForm.projectName" placeholder="请选择项目" style="width: 100%;" @change="onProjectChange">
                        <el-option
                            v-for="project in projects"
                            :key="project.value"
                            :label="project.label"
                            :value="project.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="机房名称" prop="roomName">
                    <el-input v-model="roomForm.roomName" placeholder="请输入机房名称"></el-input>
                </el-form-item>
                <el-form-item label="所属分区">
                    <el-select v-model="roomForm.zoneName" placeholder="请选择所属分区（可选）" style="width: 100%;" clearable>
                        <el-option
                            v-for="zone in availableZones"
                            :key="zone.zoneId"
                            :label="zone.zoneName"
                            :value="zone.zoneName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="机房类型" prop="roomType">
                    <el-select v-model="roomForm.roomType" placeholder="请选择机房类型" style="width: 100%;">
                        <el-option
                            v-for="type in roomTypeOptions"
                            :key="type.value"
                            :label="type.label"
                            :value="type.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="roomForm.description" placeholder="请输入机房描述" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleRoomDialogClose">取消</el-button>
                <el-button type="primary" @click="saveRoom">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#zone-room-app',
            data() {
                return {
                    activeTab: 'zone',
                    // 项目选项
                    projects: [
                        { value: '智慧园区A区', label: '智慧园区A区' },
                        { value: '智慧园区B区', label: '智慧园区B区' },
                        { value: '智慧园区C区', label: '智慧园区C区' }
                    ],
                    // 机房类型选项（建筑设施及设备区域）
                    roomTypeOptions: [
                        { value: '配电室', label: '配电室' },
                        { value: '变压器室', label: '变压器室' },
                        { value: '发电机房', label: '发电机房' },
                        { value: '水泵房', label: '水泵房' },
                        { value: '空调机房', label: '空调机房' },
                        { value: '电梯机房', label: '电梯机房' },
                        { value: '消防控制室', label: '消防控制室' },
                        { value: '监控室', label: '监控室' },
                        { value: '网络机房', label: '网络机房' },
                        { value: '集水井', label: '集水井' }
                    ],
                    // 分区数据
                    zones: [
                        { zoneId: 'Z001', location: '1号楼', projectName: '智慧园区A区', zoneName: 'A区办公楼', description: 'A区办公楼区域，包含办公区域和会议室' },
                        { zoneId: 'Z002', location: '2号楼', projectName: '智慧园区B区', zoneName: 'B区商业街', description: 'B区商业街区域，包含商铺和餐饮区域' }
                    ],
                    // 机房数据
                    rooms: [
                        { roomId: 'R001', location: '1楼东侧', projectName: '智慧园区A区', roomName: '主控机房', zoneName: 'A区办公楼', roomType: '配电室', description: 'A区主配电室，负责整个A区的电力分配' },
                        { roomId: 'R002', location: '地下一层', projectName: '智慧园区B区', roomName: '商业区机房', zoneName: 'B区商业街', roomType: '空调机房', description: 'B区商业区空调机房，负责商业区域的空调供应' },
                        { roomId: 'R003', location: '2楼西侧', projectName: '智慧园区A区', roomName: '网络机房', zoneName: '', roomType: '网络机房', description: 'A区网络机房，负责网络设备管理' }
                    ],
                    // 分区对话框相关
                    zoneDialogVisible: false,
                    zoneDialogTitle: '新增分区',
                    zoneForm: {
                        zoneId: '',
                        location: '',
                        projectName: '',
                        zoneName: '',
                        description: ''
                    },
                    zoneRules: {
                        zoneId: [{ required: true, message: '请输入分区ID', trigger: 'blur' }],
                        location: [{ required: true, message: '请输入位置', trigger: 'blur' }],
                        projectName: [{ required: true, message: '请选择项目', trigger: 'change' }],
                        zoneName: [{ required: true, message: '请输入分区名称', trigger: 'blur' }]
                    },
                    // 机房对话框相关
                    roomDialogVisible: false,
                    roomDialogTitle: '新增机房',
                    roomForm: {
                        roomId: '',
                        location: '',
                        projectName: '',
                        roomName: '',
                        zoneName: '',
                        roomType: '',
                        description: ''
                    },
                    roomRules: {
                        roomId: [{ required: true, message: '请输入机房ID', trigger: 'blur' }],
                        location: [{ required: true, message: '请输入位置', trigger: 'blur' }],
                        projectName: [{ required: true, message: '请选择项目', trigger: 'change' }],
                        roomName: [{ required: true, message: '请输入机房名称', trigger: 'blur' }],
                        roomType: [{ required: true, message: '请选择机房类型', trigger: 'change' }]
                    }
                }
            },
            computed: {
                // 根据选择的项目获取可用分区列表
                availableZones() {
                    if (!this.roomForm.projectName) {
                        return [];
                    }
                    return this.zones.filter(zone => zone.projectName === this.roomForm.projectName);
                }
            },
            methods: {
                // 分区管理方法
                addZone() {
                    this.zoneDialogTitle = '新增分区';
                    this.zoneForm = {
                        zoneId: '',
                        location: '',
                        projectName: '',
                        zoneName: '',
                        description: ''
                    };
                    this.zoneDialogVisible = true;
                },
                editZone(row) {
                    this.zoneDialogTitle = '编辑分区';
                    this.zoneForm = { ...row };
                    this.zoneDialogVisible = true;
                },
                deleteZone(row) {
                    this.$confirm('确认删除该分区吗？', '提示', { type: 'warning' }).then(() => {
                        const index = this.zones.findIndex(zone => zone.zoneId === row.zoneId);
                        if (index > -1) {
                            this.zones.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    });
                },
                handleZoneDialogClose() {
                    this.zoneDialogVisible = false;
                    this.$refs.zoneForm.resetFields();
                },
                saveZone() {
                    this.$refs.zoneForm.validate((valid) => {
                        if (valid) {
                            if (this.zoneDialogTitle === '新增分区') {
                                // 检查分区ID是否已存在
                                const exists = this.zones.some(zone => zone.zoneId === this.zoneForm.zoneId);
                                if (exists) {
                                    this.$message.error('分区ID已存在，请使用其他ID');
                                    return;
                                }
                                this.zones.push({ ...this.zoneForm });
                                this.$message.success('分区创建成功');
                            } else {
                                // 编辑分区
                                const index = this.zones.findIndex(zone => zone.zoneId === this.zoneForm.zoneId);
                                if (index > -1) {
                                    this.zones.splice(index, 1, { ...this.zoneForm });
                                    this.$message.success('分区更新成功');
                                }
                            }
                            this.handleZoneDialogClose();
                        }
                    });
                },
                // 机房管理方法
                addRoom() {
                    this.roomDialogTitle = '新增机房';
                    this.roomForm = {
                        roomId: '',
                        location: '',
                        projectName: '',
                        roomName: '',
                        zoneName: '',
                        roomType: '',
                        description: ''
                    };
                    this.roomDialogVisible = true;
                },
                editRoom(row) {
                    this.roomDialogTitle = '编辑机房';
                    this.roomForm = { ...row };
                    this.roomDialogVisible = true;
                },
                // 项目选择变化时清空所属分区
                onProjectChange() {
                    this.roomForm.zoneName = '';
                },
                deleteRoom(row) {
                    this.$confirm('确认删除该机房吗？', '提示', { type: 'warning' }).then(() => {
                        const index = this.rooms.findIndex(room => room.roomId === row.roomId);
                        if (index > -1) {
                            this.rooms.splice(index, 1);
                            this.$message.success('删除成功');
                        }
                    });
                },
                handleRoomDialogClose() {
                    this.roomDialogVisible = false;
                    this.$refs.roomForm.resetFields();
                },
                saveRoom() {
                    this.$refs.roomForm.validate((valid) => {
                        if (valid) {
                            if (this.roomDialogTitle === '新增机房') {
                                // 检查机房ID是否已存在
                                const exists = this.rooms.some(room => room.roomId === this.roomForm.roomId);
                                if (exists) {
                                    this.$message.error('机房ID已存在，请使用其他ID');
                                    return;
                                }
                                this.rooms.push({ ...this.roomForm });
                                this.$message.success('机房创建成功');
                            } else {
                                // 编辑机房
                                const index = this.rooms.findIndex(room => room.roomId === this.roomForm.roomId);
                                if (index > -1) {
                                    this.rooms.splice(index, 1, { ...this.roomForm });
                                    this.$message.success('机房更新成功');
                                }
                            }
                            this.handleRoomDialogClose();
                        }
                    });
                }
            }
        });
    </script>
</body>
</html> 